<template>
  <div class="app_container">
    <h3 class="module_head">余额/充值-消费者</h3>
    <!--卡内信息展示-->
    <table class="info_card">
      <tr>
        <th>姓名</th>
        <td>{{ userRechargeForm.personName }}</td>
      </tr>
      <tr>
        <th>所属部门</th>
        <td>{{ userRechargeForm.deptName }}</td>
      </tr>
      <tr>
        <th>卡号</th>
        <td>{{ userRechargeForm.cardNumber }}</td>
      </tr>
      <tr>
        <th>卡内余额</th>
        <td>{{ userRechargeForm.balance }}元</td>
      </tr>
    </table>
    <!--充值金额选择-->
    <el-form class="user_recharge_form" label-width="100px">
      <el-form-item label="充值金额">
        <el-radio label="1">50元</el-radio>
        <el-radio label="2">100元</el-radio>
        <el-radio label="3">200元</el-radio>
        <el-radio label="4"><el-input style="width: 80px; margin-right: 10px"></el-input>元</el-radio>
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary">充值</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'UserRecharge',
  data() {
    return {
      userRechargeForm: {
        cardNumber:'8AE7B736',
        cardCashToRecharge: undefined,
        personId: 30015,
        personName: '张三',
        deptId: 15,
        deptName: "face",
        description: '消费者在系统内自助充值',
        eventType: '其他充值',
        balance:150.00,
      }
    }
  }
}
</script>

<style scoped>
.app_container{
  padding: 20px;
}
.module_head{
  margin-top: 0;
}
.info_card{
  margin: 50px auto 30px auto;
  width: 500px;
  font-size: 14px;
  color: #606266;
  font-weight: 700;
  border: 5px solid #99a9bf;
  border-collapse:collapse;
}
th,td{
  padding: 10px 10px;
  border: 1px solid #97a8be;
}
th{
  width: 30%;
  background-color: #d3dce6;
}
td{
  width: 70%;
  text-align: center;
}
.user_recharge_form{
  width: 500px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}
.btns{
  margin-left: 120px;
}
</style>
